<template>
<div class="bc1">
  <div v-if="comMentList!=0">
     <div  v-for="item in comMentList" :key="item.id">
<div class="comMentList">
      <span class="userText">{{ item.username }}: </span>
      <span class="contentText">{{ item.content }}--</span>
      <span class="createTimeText" >{{ item.createTime | date }}</span>
      <span class="del" @click="del(item.id)" >删除</span>
        </div>
   </div>
  </div>
  <div v-else>
      <div>该文章暂时没有评论</div>
    </div>
</div>
</template>

<script>
import { fetchCommentsByTopicId, deleteComments } from '@/api/comment'
export default {
  // props:[
  //     topId:{
  //         style:String,
  //         default:true
  //     }
  // ],
  props: ['topId'],
  data () {
    return {
      comMentList: ''
    }
  },
  methods: {
    fetchParentComments () {
      fetchCommentsByTopicId(this.topId).then(response => {
        // console.log(response) // {code: 200, data: Array(2), message: "操作成功"}
        const { data } = response
        // if (data.length !== 0) {
        this.comMentList = data
        console.log(this.comMentList) // (2)[{…}, {…}, __ob__: Observer]
        // }
      })
    },
    del (id) {
      this.$confirm('是否要删除该条评论?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(id)
        try {
          deleteComments(id).then(value => {
            this.$message.success('删除成功')
            this.fetchParentComments()
            // alert(123)
          })
        } catch (e) {
          this.$message.error('删除失败')
        }
      })
        .catch(() => {
          return true
          //   this.$message({
          //     type: 'info',
          //     message: '已取消删除'
          //   })
        })
    }
  },
  created () {
    this.fetchParentComments()
    //    console.log(this.comMentList)
  },
  components: {},
  mounted () {}
}
</script>

<style lang="less" scoped>
.comMentList{
  padding-left: 20px;
  background-color: rgb(241, 241, 236,.6);
}
.userText{
  font-weight: 550;
  font-size: 10px;
}
.contentText{

}
.createTimeText{
 font-weight: 500;
  font-size: 8px;
}
.del{
   font-weight: 500;
  font-size: 8px;
  color: rgb(170, 80, 80);
  cursor:pointer
}
.bc1{
  max-height: 500px;
  overflow:scroll;

}
</style>
